fix: textarea overflow, default rows, and size/variant API#738
fix: textarea overflow, default rows, and size/variant API#738rohanchkrabrty wants to merge 3 commits intomainfrom
Conversation
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 52 minutes and 25 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
📝 WalkthroughWalkthroughThis pull request enhances the TextArea component by adding Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/raystack/components/text-area/text-area.tsx (1)
35-47: Prefer explicitrowsdefault in props destructuring.Right now the default
rowsvalue is implicit viarows={3}plus{...props}override order. Makingrowsexplicit in the function signature improves readability and avoids subtle override behavior.Suggested refactor
export function TextArea({ className, style, disabled, width = '100%', + rows = 3, value, onChange, placeholder, required, size, variant, ...props }: TextAreaProps) { @@ <textarea - rows={3} + rows={rows} className={cx( textAreaVariants({ size, variant }), disabled && styles.disabled, className )}Also applies to: 53-66
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/raystack/components/text-area/text-area.tsx` around lines 35 - 47, The TextArea component currently relies on an implicit default for rows via rows={3} merged from {...props}; update the TextArea function signature to destructure rows with an explicit default (e.g., rows = 3) alongside other props so the default is obvious and cannot be accidentally overridden by spread order; locate the TextArea function (export function TextArea) and remove or adjust any later rows={3} usage so the component uses the destructured rows value when rendering the underlying textarea.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/raystack/components/text-area/text-area.module.css`:
- Around line 90-93: The CSS for .variant-borderless currently removes the
border and outline on focus, making keyboard focus invisible; update the focus
rule for .variant-borderless:focus:not(:disabled) to keep a visible focus
indicator (e.g., use a non-transparent border-color, box-shadow, or outline with
accessible contrast) instead of border-color: transparent and outline: none so
keyboard users can see focus on the TextArea component (class
.variant-borderless / TextArea component).
---
Nitpick comments:
In `@packages/raystack/components/text-area/text-area.tsx`:
- Around line 35-47: The TextArea component currently relies on an implicit
default for rows via rows={3} merged from {...props}; update the TextArea
function signature to destructure rows with an explicit default (e.g., rows = 3)
alongside other props so the default is obvious and cannot be accidentally
overridden by spread order; locate the TextArea function (export function
TextArea) and remove or adjust any later rows={3} usage so the component uses
the destructured rows value when rendering the underlying textarea.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e5091c4d-56ca-4e79-866e-8c23a668f795
📒 Files selected for processing (6)
apps/www/src/content/docs/components/textarea/demo.tsapps/www/src/content/docs/components/textarea/index.mdxapps/www/src/content/docs/components/textarea/props.tspackages/raystack/components/text-area/__tests__/text-area.test.tsxpackages/raystack/components/text-area/text-area.module.csspackages/raystack/components/text-area/text-area.tsx
| .variant-borderless:focus:not(:disabled) { | ||
| border-color: transparent; | ||
| outline: none; | ||
| } |
There was a problem hiding this comment.
Borderless variant loses visible keyboard focus state.
Line 90–93 keeps border transparent and removes outline, so focused and unfocused states become visually indistinguishable for keyboard users. Please retain a visible focus indicator for variant="borderless".
Suggested patch
.variant-borderless:focus:not(:disabled) {
border-color: transparent;
- outline: none;
+ outline: 2px solid var(--rs-color-border-accent-emphasis);
+ outline-offset: 1px;
}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/raystack/components/text-area/text-area.module.css` around lines 90
- 93, The CSS for .variant-borderless currently removes the border and outline
on focus, making keyboard focus invisible; update the focus rule for
.variant-borderless:focus:not(:disabled) to keep a visible focus indicator
(e.g., use a non-transparent border-color, box-shadow, or outline with
accessible contrast) instead of border-color: transparent and outline: none so
keyboard users can see focus on the TextArea component (class
.variant-borderless / TextArea component).
There was a problem hiding this comment.
We have focus ring related improvements planned. Will be picked later.
There was a problem hiding this comment.
@paanSinghCoder, understood! Would you like me to open a follow-up GitHub issue to track the focus ring improvements for the variant="borderless" textarea (and potentially other components), so it doesn't get lost?
| } | ||
|
|
||
| /* Size variants */ | ||
| .size-large { |
There was a problem hiding this comment.
.size-large is not required as its the default size and these three properties are already defined in .textarea class.
| outline: none; | ||
| height: auto; | ||
| width: 100%; | ||
| min-height: var(--rs-space-13); |
There was a problem hiding this comment.
Removing min-height might introduce unexpected height shift in the client. We should mention this in v1-migration-guide.
Example: If someone sets rows={1}, it will render a shorter textarea than before.
| type: 'select', | ||
| options: ['default', 'borderless'], | ||
| defaultValue: 'default' | ||
| }, |
There was a problem hiding this comment.
Lets add rows prop control as well in the playground.
Fix overflow: hidden preventing scroll, replace CSS min-height with native rows attribute (default 3), and add size/variant CVA variants to align TextArea API with InputField. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Document breaking changes (overflow hidden->auto, min-height removal) and new features (size, variant, rows props) from the textarea PR. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
c9bceb8 to
49c274b
Compare
Summary
overflow: autoso users can scroll when content exceeds the visible arearowsattribute -- removed hardcodedmin-height: var(--rs-space-13)and setrows={3}as default, allowing users to override with<TextArea rows={6} />sizeandvariantCVA variants to align TextArea API with InputField -- supportssize="small" | "large"andvariant="default" | "borderless"with matching defaults (size: 'large',variant: 'default')Test plan
<TextArea rows={6} />renders taller than defaultsize="small"applies smaller paddingvariant="borderless"removes bordersCloses #645
🤖 Generated with Claude Code